<template>
    <div style="height:100%;">
        <navbar :showBackButton=false :showLeftArrow=false>
            <template #left>
                <div class="header-left-title">{{ $t('workbenches') }}</div>
            </template>
            <template #right>
                <a @click="changeRoleModal(false)" class="head-icon iconfont icon-qiehuanyonghu" style="color: #333333;"></a>
            </template>
        </navbar>
        <div class="content">
            <div class="year-select-box">
                <van-dropdown-menu active-color="#075ebb">
                    <van-dropdown-item v-model="year" :options="yearList" @change="selectYear()"/>
                </van-dropdown-menu>
            </div>
            <div class="learn-message-statistics">
                <div class="inner-box">
                    <div class="study-statistics">
                        <div class="statistics-item students-total-number">
                            <div class="title">{{$t('students_total')}}</div>
                            <div class="txt">{{learnStatistics.studentTotal || 0}}</div>
                            <div class="img"></div>
                        </div>
                        <div class="statistics-item study-total-number">
                            <div class="title">{{$t('learn_frequency')}}</div>
                            <div class="txt">{{learnStatistics.learnCount || 0}}</div>
                            <div class="img"></div>
                        </div>
                        <div class="statistics-item study-time-total-number">
                            <div class="title">{{$t('cos_app_lengthofstudy')}}</div>
                            <div class="txt">{{learnStatistics.learnDuration || 0}}<span style="font-size: 12px;">h</span></div>
                            <div class="img"></div>
                        </div>
                    </div>
                    <div class="course-statistics">
                        <div class="first-statistics-col">
                            <div class="course-total">
                                <div class="title">{{$t('personal_ls_course_count')}}</div>
                                <div class="txt">{{learnStatistics.itemTotal || 0}}</div>
                            </div>
                            <div class="exam-total">
                                <div class="title">{{$t('personal_ls_exam_count')}}</div>
                                <div class="txt">{{learnStatistics.examTotal || 0}}</div>
                            </div>
                        </div>
                        <div class="second-statistics-col">
                            <div class="train-total">
                                <div class="title">{{$t('train_total')}}</div>
                                <div class="txt">{{learnStatistics.trainTotal || 0}}</div>
                                <div class="img"></div>
                            </div>
                        </div>
                        <div class="third-statistics-col">
                            <div class="course-complete-rate">
                                <div class="title">{{$t('course_complete_rate')}}</div>
                                <div class="txt">{{learnStatistics.itemFinishRate || 0}}<span style="font-size: 12px;">%</span></div>
                                <div class="img"></div>
                            </div>
                            <div class="exam-complete-rate">
                                <div class="title">{{$t('exam_complete_rate')}}</div>
                                <div class="txt">{{learnStatistics.examFinishRate || 0}}<span style="font-size: 12px;">%</span></div>
                                <div class="img"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="learning-frequency-statistics">
                <div class="title">{{$t('Statistics_of_learning_frequency')}}</div>
                <div class="chart-box">
                    <div style="width: 100%;height: 200px;" ref="myChart"></div>
                </div>
            </div>
        </div>
        <!-- 底部导航 -->
        <admin-bottom-navigation :active=4></admin-bottom-navigation>
        <!-- 切换到培训管理员角色 -->
        <van-dialog
            v-model="roleHint"
            show-cancel-button
            :showConfirmButton=false
            :cancelButtonText="$t('cancel')"
            >
            <p style="font-size: 14px;text-align: center;">{{ $t('click_check_role') }}</p>
            <p @click="changeRoleModal(true)" class="rolr-list-box">{{ $t('lab_user') }}</p>
        </van-dialog>
  </div>
</template>

<script>
import {DropdownMenu, DropdownItem} from 'vant';
import AdminBottomNavigation from '@/components/adminComponent/adminBottomNavigation/AdminBottomNavigation';
export default {
    // 工作台
    name: 'workbenches',
    components: {
        [DropdownMenu.name]: DropdownMenu,
        [DropdownItem.name]: DropdownItem,
        AdminBottomNavigation
    },
    data() {
        return {
            roleHint: false,
            year: '',
            yearList: [
                {
                    value: 2024,
                    text: 2024 + this.$t('year')
                }
            ],
            learnStatistics: {},
            isHasCenter: true
        };
    },
    mounted() {
        this.checkHasTrainCenter();
        this.year = new Date().getFullYear();
        this.getYearList();
    },
    methods: {
        checkHasTrainCenter() {
            this.$axios({
                method: 'GET',
                url: `/app/api/training-center/list`
            }).then((res) => {
                this.getData();
            }).catch(() => {
                this.isHasCenter = false;
                this.isLoading = false;
                this.$toast(this.$t('requestError.ERROR_NO_TRAININGCENTER_MANAGEMENT'));
            });
        },
        //选择参与状态
        selectYear() {
            this.getData();
        },
        getData() {
            if (!this.isHasCenter) {
                this.$toast(this.$t('requestError.ERROR_NO_TRAININGCENTER_MANAGEMENT'));
                return false;
            }
            this.getLearnData();
            this.getHourData();
        },
        getYearList() {
            this.$axios.get(`/app/api/workbench/getHours`).then((res) => {
                this.yearList = [];
                res.data.forEach(item => {
                    this.yearList.push({
                        value: item,
                        text: item + this.$t('year')
                    });
                });
            });
        },
        getLearnData() {
            let params = {
                year: this.year
            };
            this.$axios.get(`/app/api/workbench/statistics/learn`, {params}).then((res) => {
                this.learnStatistics = res.data;
            });
        },
        getHourData() {
            let params = {
                year: this.year
            };
            this.$axios.get(`/app/api/workbench/statistics/hour`, {params}).then((res) => {
                let xAxisList = [];
                let yAxisList = [];
                res.data.forEach(item => {
                    xAxisList.push(item.hour);
                    yAxisList.push(item.num);
                });

                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(this.$refs.myChart);
                // 绘制图表
                myChart.setOption({
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: xAxisList
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: yAxisList,
                            type: 'line',
                            symbol: 'circle',
                            symbolSize: 4,
                            itemStyle: {
                                // 折线颜色
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 1,
                                        color: '#A0D8F3'
                                    },
                                    {
                                        offset: 0,
                                        color: '#7CCBF1'
                                    }
                                ])
                            },
                            areaStyle: {
                                // 折线图下面的填充区域颜色
                                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 1,
                                        color: '#F1F6FA'
                                    },
                                    {
                                        offset: 0.5,
                                        color: '#A0D8F3'
                                    },
                                    {
                                        offset: 0,
                                        color: '#7CCBF1'
                                    }
                                ])
                            }
                        }
                    ]
                });
            });
        },
        // 弹出切换培训管理端弹框或者切换管理员逻辑处理
        changeRoleModal(flag) {
            if (flag) {
                this.$axios({
                    method: 'GET',
                    url: '/app/api/role/change-role',
                    params: {
                        roleExtId: 'NLRN_1'
                    }
                }).then(res => {
                    if (res.data) {
                        window.localStorage.setItem('currentRole', res.data.currentRole);
                        this.roleHint = false;
                        this.$router.replace('/home');
                    }
                });
            } else {
                this.roleHint = true;
            }
        }
    }
};
</script>

<style scoped lang='less'>
    /deep/.van-dialog__content{
        padding: 23px;
    }
    .header-left-title{
        line-height: 55px;
        font-size: 19px;
        color: #1B1B1B;
        padding-left: 12px;
    }
    .head-icon {
        font-size: 25px;
        margin: 0px 0 0 11px;
    }
    .rolr-list-box{
        text-align:center;
        font-size: 18px;
        color: blue;
        margin-top: 20px;
    }
    .content{
        background: url(./image/bg.png) no-repeat;
        background-size: cover;
        background-position: 0 -20px;
        .year-select-box{
            margin-top: 12px;
            // margin-left: 18px;
            /deep/.van-dropdown-menu__bar{
                background: none!important;
                box-shadow: none!important;
                .van-dropdown-menu__item{
                    flex: none!important;
                    margin-left: 18px!important;
                    .van-ellipsis{
                        color: white;
                    }
                }
            }
        }
        .learn-message-statistics{
            margin-top: 28px;
            padding: 0 15px;
            .inner-box{
                padding: 22px 18px;
                background: white;
                border-radius: 3px;
                // height: 444px;
                .study-statistics{
                    display: flex;
                    justify-content: space-between;
                    .statistics-item{
                        width: 95px;
                        height: 86px;
                        border-radius: 5px;
                        color: white;
                        position: relative;
                        .title{
                            font-size: 10px;
                            color: #eee;
                            margin: 10px 0 15px 10px;
                        }
                        .txt{
                            font-size: 15px;
                            color: #fff;
                            padding-left: 10px;
                        }
                    }
                    .students-total-number{
                        background: #7187FF;
                        .img{
                            background: url(./image/student.png) no-repeat;
                            background-size: cover;
                            height: 40px;
                            width: 40px;
                            position: absolute;
                            right: 7px;
                            bottom: -7px;
                        }
                    }
                    .study-total-number{
                        background: #9785F1;
                        .img{
                            background: url(./image/study.png) no-repeat;
                            background-size: cover;
                            height: 34px;
                            width: 40px;
                            position: absolute;
                            right: 4px;
                            bottom: 0px;
                        }
                    }
                    .study-time-total-number{
                        background: #FEA338;
                        .img{
                            background: url(./image/learn.png) no-repeat;
                            background-size: cover;
                            height: 34px;
                            width: 36px;
                            position: absolute;
                            right: -2px;
                            bottom: -4px;
                        }
                    }
                }
                .course-statistics{
                    display: flex;
                    justify-content: space-between;
                    margin-top: 12px;
                    .title{
                        padding: 10px 0 15px 10px;
                        color: #535353;
                        font-size: 10px;
                    }
                    .txt{
                        font-size: 15px;
                        padding-left: 10px;
                    }
                    .first-statistics-col{
                        .course-total{
                            width: 77px;
                            height: 68px;
                            background: #FEEFE8;
                            border-radius: 5px;
                            .txt{
                                color: #EF6828;
                            }
                        }
                        .exam-total{
                            width: 76px;
                            height: 68px;
                            background: #E9F1FE;
                            border-radius: 5px;
                            margin-top: 8px;
                            .txt{
                                color: #3454F5;
                            }
                        }
                    }
                    .second-statistics-col{
                        .train-total{
                            width: 90px;
                            height: 145px;
                            background: #D9F6EF;
                            border-radius: 5px;
                            position: relative;
                            .title{
                                padding-bottom: 18px;
                            }
                            .txt{
                                color: #32B16C;
                            }
                            .img{
                                background: url(./image/train.png) no-repeat;
                                background-size: cover;
                                height: 52px;
                                width: 57px;
                                position: absolute;
                                right: 0px;
                                bottom: 0px;
                            }
                        }
                    }
                    .third-statistics-col{
                        .course-complete-rate{
                            width: 128px;
                            height: 68px;
                            background: #FEEFE8;
                            border-radius: 5px;
                            position: relative;
                            .txt{
                                color: #EF6828;
                                text-align: center;
                            }
                            .img{
                                background: url(./image/course-rate.png) no-repeat;
                                background-size: cover;
                                height: 24px;
                                width: 128px;
                                position: absolute;
                                right: 0px;
                                bottom: 0px;
                            }
                        }
                        .exam-complete-rate{
                            width: 128px;
                            height: 68px;
                            background: #E9F1FE;
                            border-radius: 5px;
                            margin-top: 8px;
                            position: relative;
                            .txt{
                                color: #3454F5;
                                text-align: center;
                            }
                            .img{
                                background: url(./image/exam-rate.png) no-repeat;
                                background-size: cover;
                                height: 24px;
                                width: 128px;
                                position: absolute;
                                right: 0px;
                                bottom: 0px;
                            }
                        }
                    }
                }
            }
        }
        .learning-frequency-statistics{
            padding: 0 15px 70px;
            .title{
                padding: 0 15px;
                font-size: 12px;
                color: #333333;
                background: white;
            }
            .chart-box{
                padding: 0 15px;
                background: white;
                border-bottom-left-radius: 3px;
                border-bottom-right-radius: 3px;
                /deep/.noselect{
                    width: 100%!important;
                }
            }
        }
    }
</style>
